<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏管理</title>
    <link href="../common/css/bootstrap.min.css" rel="stylesheet">
    <script src="../common/js/jquery.min.js"></script>
    <script src="../common/js/bootstrap.bundle.min.js"></script>
    <style>
        .table th,
        .table td {
            text-align: center;
            vertical-align: middle !important;
        }

        .table img {
            max-width: 100px;
            max-height: 100px;
        }

        .pagination {
            justify-content: center;
        }

        .search-box {
            margin-bottom: 20px;
        }

        .game {
            margin-top: 40px;
        }
    </style>
</head>

<body>
    <?php
    include './header.php';
    include_once '../conn.php';
    ?>

    <div class="game container">
        <div class="mb-3">
            <a href="add_game.php" class="btn btn-success">增加游戏</a>
        </div>
        <!-- 搜索框 -->
        <div class="mb-3 search-box">
            <input type="text" class="form-control" id="searchInput" placeholder="输入关键词进行搜索">
        </div>

        <!-- 游戏列表 -->
        <table class="table">
            <thead>
                <tr>
                    <th style="display:none;">ID</th>
                    <th></th>
                    <th>名称</th>
                    <th>介绍</th>
                    <th>出版公司</th>
                    <th>发行时间</th>
                    <th>评分</th>
                    <th>类别</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="tableBody">
                <!-- 表格数据将通过 JavaScript 动态加载到此处 -->
            </tbody>
        </table>

        <!-- 分页 -->
        <nav aria-label="Page navigation">
            <ul class="pagination" id="pagination"></ul>
        </nav>
    </div>

    <script>
        // 函数：根据页数和搜索条件加载表格数据
        function loadTableData(page, search) {
            $.ajax({
                url: 'get_games.php', // 替换为实际的 PHP 文件以获取数据
                method: 'GET',
                data: {
                    page: page,
                    search: search
                }, 
                dataType: 'json',
                success: function(data) {
                    // 清除先前的数据
                    $('#tableBody').empty();

                    // 填充表格数据
                    $.each(data.games, function(index, game) {
                        var row = `<tr>
                            <td style='display:none;'>${game.game_id}</td>
                            <td><img src='../${game.image_path}' alt='Game Image' style='width:150px;height:70px;'></td>
                            <td>${game.title}</td>
                            <td>${game.description}</td>
                            <td>${game.publisher}</td>
                            <td>${game.release_date}</td>
                            <td>${game.rating}</td>
                            <td>${game.category_name}</td>
                            <td>
                                <a href='edit_game.php?id=${game.game_id}' class='btn btn-primary btn-sm'>修改</a>
                                <a href='delete_game.php?id=${game.game_id}' class='btn btn-danger btn-sm'>删除</a>
                            </td>
                        </tr>`;
                        $('#tableBody').append(row);
                    });

                    // 更新分页
                    updatePagination(data.total_pages, page);
                },
                error: function(error) {
                    console.error('加载表格数据时出错：', error);
                }
            });
        }

        // 函数：更新分页
        function updatePagination(totalPages, currentPage) {
            $('#pagination').empty();
            for (var i = 1; i <= totalPages; i++) {
                var liClass = i === currentPage ? 'page-item active' : 'page-item';
                var pageLink = `<a class='page-link' href='#'>${i}</a>`;
                var li = `<li class='${liClass}'>${pageLink}</li>`;
                $('#pagination').append(li);
            }
        }

        // 初始加载
        loadTableData(1, '');

        // 分页点击事件
        $(document).on('click', '.pagination li', function(event) {
            event.preventDefault();
            var page = $(this).text();
            loadTableData(page, $('#searchInput').val());
        });

        // 搜索输入变化事件
        $('#searchInput').on('input', function() {
            loadTableData(1, $(this).val());
        });
    </script>
</body>

</html>